<template>
    <tr-datetime-picker v-model="value" type="daterange" rangeSeparator="至"/>
</template>
<script setup>
const emits = defineEmits(['update:modelValue'])
const props = defineProps({
    modelValue: {
        default: null
    }
})

const value = computed({
    get() {
        if (props.modelValue) {
            return [props.modelValue.startDate, props.modelValue.endDate]
        }
    },
    set(val) {
        if (val) {
            emits('update:modelValue', {startDate: val[0], endDate: val[1]})
        } else {
            emits('update:modelValue', null)
        }
    }
})

</script>
<style scoped lang="scss">
.range-number {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32rpx;
}

.text {
    font-size: 28rpx;
}
</style>
